<template>
  <div class="app-container">
    {{$t('setting.Contact_number_setting')}}
    <div class="filter-container" style="overflow:hidden">
      {{$t('setting.Business_cooperation_number')}}：<el-input type="number" style="width: 200px;margin-left:30px;margin-right:20px;margin-top:50px" :placeholder="$t('setting.Please_enter_contact_number')" v-model.trim="phone" >
      </el-input>
    </div>
    <div class="filter-container" style="overflow:hidden">
      {{$t('setting.Customer_service_number')}}：<el-input type="number" style="width: 200px;margin-right:20px;margin-top:50px" :placeholder="$t('setting.Please_enter_business_cooperation_number')" v-model.trim="coopPhone" >
      </el-input>
    </div>
    <el-button @click="confirm" type="primary" style="margin-top:50px;margin-left:10px;width:100px">{{$t('common.Save')}}</el-button>
  </div>
</template>

<script>
import { getSystemParamter , updateSystemParamter } from '@/api/system'
import { validatePhone } from '@/utils/validate'
export default {
  name: 'setting_phone',
  data(){
    return{
      phone:'',
      coopPhone:'',
    }
  },
  methods:{
    // 客服电话
    async getPhone(){
      const { data } = await getSystemParamter({
        key:'SYS00007',
      })
      this.phone = data.systemValue
    },
    // 商务合作
    async getCoop(){
      const { data } = await getSystemParamter({
        key:'SYS00008',
      })
        this.coopPhone = data.systemValue
    },
    async postPhone(){
      const{ data } = await updateSystemParamter({
          key:'SYS00007',
          value: this.phone
        })  
    },
    async postCoop(){
        const{ data } = await updateSystemParamter({
          key:'SYS00008',
          value:this.coopPhone
        })
    },
    confirm(){
      const numReg = /^[0-9]{0,}$/

      if (!numReg.test(this.phone)) {
        this.$message({
            type:'error',
            message:'号码格式错误'
        });
        return
      }
      if (!numReg.test(this.coopPhone)) {
        this.$message({
            type:'error',
            message:'号码格式错误'
        });
        return
      }
      if(!this.phone || !this.coopPhone)
      {
        this.$message({
            type:'error',
            message:'号码为空'
        });
      }else{
        this.postPhone()
        this.postCoop()
        this.$message({
          type: 'success',
          message: `修改成功!`
        });
      }
    },
  },
  created(){
    this.getPhone()
    this.getCoop()
  },
}
</script>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
</style>
